import { useEffect, useRef, useState } from "react"
import { Col, Row, Button, Input, Checkbox, Table, Tag, Pagination, Tooltip, Skeleton, message } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import { GetAdmins, DeleteAdmin, banAdmin, GetActions, getErrors } from "../../api/admin";

/**
 * 
 * @returns 管理员错误日志
 */
const AdminError=()=>{
    document.info = [
        {
            title:"管理员-错误日志",
            url: "/admin/error",
        },
        {
            title: "管理员",
            url: "/admin",
        }
      ]
 // 搜索框属性 start
 const { Search } = Input;
 const suffix = (
     <AudioOutlined
         style={{
             fontSize: 16,
             color: '#1677ff',
         }}
     />
 );

 /**
* 分页数据
*/
 const [pages, setPage] = useState({
     page: 1,
     limit: 10,
     key: "",
     total: 0,
 });


 const navigate = useNavigate();

 //获取搜索框dom
 const myRef = useRef("");

 const onSearch = (value, _e, info) => {
     console.log(111111);
     setPage((pages) => ({ ...pages, key: value }));
 }

 //搜索框改变事件
 const onSearchData = () => {
     // setLike((likeSelect) => ({ ...likeSelect, key: myRef.current.input.value }));

     if (myRef.current.input.value == "" || myRef.current.input.value == null) {
         setPage((pages) => ({ ...pages, key: "" }));
     }
 }
 //搜索框属性 end



 /**
* 表格数据
*/
 const [tableData, setData] = useState([]);
 //加载效果
 const [load, setLoad] = useState({
     loading: false,
     isFirst: true
 });

 //禁用/启用
 const isBan = async (id) => {
     setLoad((load) => ({ ...load, loading: true }));
     const res = await banAdmin({ id: id });
     if (res?.result === 0) {
         message.success(res?.message)
         getData();
     } else {
         message.error(res?.message);
         setLoad((load) => ({ ...load, loading: false }));
     }
 }








 const getData = async () => {
     setLoad((load) => ({ ...load, loading: true }));
     const data = await getErrors({ page: pages.page, limit: pages.limit, key: pages.key });


     if (data.result === 0) {
         data.data.data.map((d, i) => { return d.Index = i + 1 });
         setData(data.data);

         setPage((pages) => ({ ...pages, total: data.data.total }));
         setLoad((load) => ({ ...load, loading: false, isFirst: false }));
     }
 }
 useEffect(() => {
     getData();
 }, [pages.page, pages.limit, pages.key]);


 //删除管理员
 const deleteAdmin = async (props) => {
     setLoad((load) => ({ ...load, loading: true }));
     const res = await DeleteAdmin({ id: props });
     if (res?.result === 0) {
         message.success(res?.message);
         getData();
     } else {
         setLoad((load) => ({ ...load, loading: false }));
         message.error(res?.message);
     }

 }

 //表格表头
 const columns = [
     {
         title: '序号',
         dataIndex: 'Index',
         key: 'Index',
         width:80
     },
     {
        title: '地址',
        dataIndex: 'url',
        key: 'url',
        render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
        onCell: () => {
            return {
                style: {
                    maxWidth: 200,
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    cursor: 'pointer',
                    height: "51px"

                }
            }
        },
    },
    {
        title: '错误信息',
        dataIndex: 'message',
        key: 'message',
        render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
        onCell: () => {
            return {
                style: {
                    maxWidth: 200,
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    cursor: 'pointer',
                    height: "51px"

                }
            }
        },
    },
    {
        title: '时间',
        dataIndex: 'time',
        key: 'time',
        render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
        onCell: () => {
            return {
                style: {
                    maxWidth: 300,
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    cursor: 'pointer',

                }
            }
        },
    },
    {
        title: 'ip',
        dataIndex: 'ip',
        key: 'ip',
        render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
        onCell: () => {
            return {
                style: {
                    maxWidth: 300,
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    cursor: 'pointer',

                }
            }
        },
    },
     
     {
         title: '参数',
         dataIndex: 'params',
         key: 'params',
         render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
         onCell: () => {
             return {
                 style: {
                     maxWidth: 200,
                     overflow: 'hidden',
                     whiteSpace: 'nowrap',
                     textOverflow: 'ellipsis',
                     cursor: 'pointer',
                     height: "51px"

                 }
             }
         },
     },
    

 ];



 //分页改变事件
 const pageChange = (props) => {
     setPage((pages) => ({ ...pages, page: props }));
 }

 //去新增
 const goAdd = () => {
     navigate("/admin/add");
 }


 return (
     <div className="Containers">

         <Skeleton active loading={load.isFirst} paragraph={{ rows: 15 }}>

             <div className="goodsIndexContainer">
                 <div className="good-head">
                     <div></div>


                     <div>
                         <Search
                             placeholder="关键字"
                             onSearch={onSearch}
                             onChange={(e) => onSearchData(e)}
                             allowClear
                             ref={myRef}
                             style={{
                                 width: 500,
                             }}
                         />
                     </div>


                     <div></div>
                 </div>



                 <div className="good-data">

                     <Table dataSource={tableData.data} columns={columns} bordered pagination={false} loading={load.loading}
                         style={{ marginTop: "10px" }}
                         scroll={{
                             y: "405px",
                             x: "1200px"
                         }} />

                     <div className="page-layout">
                         <Pagination defaultCurrent={1} total={pages.total} onChange={(value) => { pageChange(value) }} />
                     </div>
                 </div>
             </div>

         </Skeleton>

     </div>
 )
}


export default AdminError